<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>UC浏览器</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			} 
			img{
				vertical-align: bottom;
			}
			li{
				list-style: none;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.clearfix::before,.clearfix::after{
				content:'';
				display:table;
			}
			.clearfix::after{
				clear:both;
			}
			.w{
				width: 986px;
				margin: 0 auto;
			}
			.bd{
				border:1px solid red;
			}
			a{
				text-decoration: none;   
			}
			header{
				position: fixed;
				z-index: 100;
				background-color: width;
				width: 100%;
			}
			.logo{
				padding-top: 15px;
				padding-bottom: 12px;
			}
			.navigation{
				padding-right: 20px;
				padding-top: 5px;
				position: relative;
				
			}
			.navigation>li{
				padding:0 10px;
				margin-left: ;
			}
			.current{
				border-bottom: 3px solid red;
			}
			.navigation a{
				display: block;
				line-height: 62px;
				font-size: 20px;	
			\
			}
			.navigation>li:hover{
				border-bottom: 3px solid green;
			}
			.subnav{
				display:none;	
				position: absolute;
				/* top: 0;
				left: 0; */
			}
			.subnav a{
				display: block;
				line-height: 20px;
				font-size:16px;	
			}			
			.navigation li:hover .subnav{
				display: block;
				background-color: white;	 	
			}
			/* li:hover是悬停 */
			.subnav li:hover{
				display:block;
				background-color: yellow;
			}
			.main{
				padding-top: 70px;
			}
			.banner{
				height: 400px;
				background: #191919 url(images/banner.jpg) no-repeat center 0;
			}
			.icons{
				border-bottom: 1px solid red;
				height: 145px;
			}
			.icon{
				padding-top: 58px;
				width: 138px;
				background: url(./images/icon.png) no-repeat 49px 21px;
			}
			.icon:nth-child(2){
				background-position :-89px 21px;
			}
			.icon:nth-child(3){
				background-position :-226px 21px;
				position: relative;
			}
			.icon:nth-child(3)::before{
				content: "";
				width: 23px;
				height: 11px;
				background: url(images/icon.png) -140px -280px;
				position: absolute;
				top: 15px;
				left: 83px;
			}
			.icon:nth-child(4){
				background-position :-365px 21px;
				position:relative ;
			}
			.icon:nth-child(4)::before{
				content: "";
				width: 23px;
				height: 11px;
				background: url(images/icon.png) -140px -280px;
				position: absolute;
				top: 15px;
				left: 83px;
			}
			.icon:nth-child(5){
				background-position :-506px 21px;
			}
			.icon:nth-child(6){
				background-position :-646px 21px;
			}
			.icon:hover{
				background-position: 49px -99px;
			}
			.icon:hover:nth-child(2){
				background-position: -89px -99px;
			}
			.icon:hover:nth-child(3){
				background-position: -226px -99px;
			}
			.icon:hover:nth-child(4){
				background-position: -365px -99px;
			}
			.icon:hover:nth-child(5){
				background-position: -506px -99px;
			}
			.icon:hover:nth-child(6){
				background-position: -646px -99px;
			}
			.icon a{
				display: block;
				font-size: 11px;
				line-height: 82px;
				text-align: center;
			}
			.icons .w{
				position: relative;
			}
			.twcode{
				background: url(images/twocode.png) no-repeat;
				width: 128px;
				line-height: 71px;
				font-size: 11px;
				padding-top: 106px;
				text-align: center;
				position: absolute;
				top: -32px;
				right: -4px;
			}
			.news{}
			.new{
				width: 290px;
			}
			.title{
				padding-right: 20px;
			}
			.title h4{}
			.title a{
				position: relative;
				font-size: 12px;
				line-height: 58px;
				padding-right: 14px;
			}
			.title a::before{
				content: "";
				border:  2px solid #FF0000;
				height: 5px;width: 5px;
				border-left: 2px solid transparent;
				border-bottom: 2px solid transparent;
				transform: rotate(45deg);
				position: absolute;
				top: 24px;
				left: 28px;
			}
			.title div{
				border:  2px solid #FF0000;
				height: 5px;width: 5px;
				border-left: 2px solid transparent;
				border-bottom: 2px solid transparent;
				transform: rotate(45deg);
				margin-right:5px;
				margin-top: 10px;
			}
			.pic{
				background: url(images/activity_pic.jpg)  no-repeat; 
				padding-top: 120px;
			}
			.pic a{
				font-size: 12px;
				line-height: 34px;
				text-align:  center;
				display: block;	
				background-color: aquamarine;
			}
			.new ul{}
			.new ul li{}
			.new ul li a{}
			</style>
	</head>
	<body>
		<header >
			<div class="clearfix w   ">
			<div class="logo fl ">
				<img src="images/uclogo.png" alt="">
			</div>
			<ul class="navigation fr clearfix ">
				<li class="fl current "><a href="">首页</a></li>                           
				<li class="fl ">
					<a href=" ">下载</a>
					<ul class="subnav">
						<li><a href="">手机UC</a></li>
						<li><a href="">电脑浏览器</a></li>
						<li><a href="">TV浏览器</a></li>
					</ul>
				</li>                           
				<li class="fl">
					<a href="">公司</a>
				</li>                           
				<li class="fl"><a href="">合作</a></li>                           
				<li class="fl"><a href="">社区</a></li>                           
				<li class="fl"><a href="">帮助</a></li> 								 
			</div>
		</header>
		
		<div class="main">
			<div class="banner"></div>
			<div class="icons bd">
				<div class="w clearfix">
					<div class="icon fl bd"><a href="">Android版下载</a></div>
					<div class="icon fl bd"><a href="">iPhone版下载</a></div>
					<div class="icon fl bd"><a href="">电脑版下载</a></div>
					<div class="icon fl bd"><a href="">Pad版下载</a></div>
					<div class="icon fl bd"><a href="">TV版下载</a></div>
					<div class="icon fl bd"><a href="">WP版下载</a></div>
					<div class="twcode fl bd">手机扫一扫下载</div>
				</div>
			</div>
			
		</div>
		<footer></footer>
	</body>
</html>
